<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>CSS宝鉴 | Mask的前端笔记</title>
    <meta name="generator" content="VuePress 1.8.0">
    <link rel="icon" href="/note_blob/favicon.ico">
    <meta name="description" content=" ">
    
    <link rel="preload" href="/note_blob/assets/css/0.styles.eb969508.css" as="style"><link rel="preload" href="/note_blob/assets/js/app.2eeab7c1.js" as="script"><link rel="preload" href="/note_blob/assets/js/2.0b68a382.js" as="script"><link rel="preload" href="/note_blob/assets/js/11.5743c401.js" as="script"><link rel="prefetch" href="/note_blob/assets/js/10.bc0c7728.js"><link rel="prefetch" href="/note_blob/assets/js/12.83b7c603.js"><link rel="prefetch" href="/note_blob/assets/js/3.1f4727a9.js"><link rel="prefetch" href="/note_blob/assets/js/4.158abeb5.js"><link rel="prefetch" href="/note_blob/assets/js/5.fd05ad8b.js"><link rel="prefetch" href="/note_blob/assets/js/6.91a76f73.js"><link rel="prefetch" href="/note_blob/assets/js/7.1ca97cb1.js"><link rel="prefetch" href="/note_blob/assets/js/8.3b303ca1.js"><link rel="prefetch" href="/note_blob/assets/js/9.9661832c.js">
    <link rel="stylesheet" href="/note_blob/assets/css/0.styles.eb969508.css">
  </head>
  <body>
    <div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/note_blob/" class="home-link router-link-active"><!----> <span class="site-name">Mask的前端笔记</span></a> <div class="links"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <nav class="nav-links can-hide"><div class="nav-item"><a href="/note_blob/" class="nav-link">
  主页
</a></div><div class="nav-item"><a href="/note_blob/docs/base.html" class="nav-link">
  基础篇
</a></div><div class="nav-item"><a href="/note_blob/docs/share.html" class="nav-link">
  分享篇
</a></div><div class="nav-item"><a href="/note_blob/docs/code.html" class="nav-link">
  代码篇
</a></div><div class="nav-item"><a href="/note_blob/docs/book.html" class="nav-link">
  推荐篇
</a></div><div class="nav-item"><a href="/note_blob/docs/css.html" aria-current="page" class="nav-link router-link-exact-active router-link-active">
  css篇
</a></div><div class="nav-item"><a href="https://github.com/jsmask" target="_blank" rel="noopener noreferrer" class="nav-link external">
  Github
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div> <!----></nav></div></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/note_blob/" class="nav-link">
  主页
</a></div><div class="nav-item"><a href="/note_blob/docs/base.html" class="nav-link">
  基础篇
</a></div><div class="nav-item"><a href="/note_blob/docs/share.html" class="nav-link">
  分享篇
</a></div><div class="nav-item"><a href="/note_blob/docs/code.html" class="nav-link">
  代码篇
</a></div><div class="nav-item"><a href="/note_blob/docs/book.html" class="nav-link">
  推荐篇
</a></div><div class="nav-item"><a href="/note_blob/docs/css.html" aria-current="page" class="nav-link router-link-exact-active router-link-active">
  css篇
</a></div><div class="nav-item"><a href="https://github.com/jsmask" target="_blank" rel="noopener noreferrer" class="nav-link external">
  Github
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div> <!----></nav>  <ul class="sidebar-links"><li><section class="sidebar-group depth-0"><p class="sidebar-heading open"><span>CSS宝鉴</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/note_blob/docs/css.html#重置页面样式" class="sidebar-link">重置页面样式</a><ul class="sidebar-sub-headers"></ul></li><li><a href="/note_blob/docs/css.html#单行溢出省略" class="sidebar-link">单行溢出省略</a><ul class="sidebar-sub-headers"></ul></li><li><a href="/note_blob/docs/css.html#多行溢出省略" class="sidebar-link">多行溢出省略</a><ul class="sidebar-sub-headers"></ul></li><li><a href="/note_blob/docs/css.html#弹性居中" class="sidebar-link">弹性居中</a><ul class="sidebar-sub-headers"></ul></li><li><a href="/note_blob/docs/css.html#蒙层" class="sidebar-link">蒙层</a><ul class="sidebar-sub-headers"></ul></li><li><a href="/note_blob/docs/css.html#计数器" class="sidebar-link">计数器</a><ul class="sidebar-sub-headers"></ul></li><li><a href="/note_blob/docs/css.html#选择元素高亮" class="sidebar-link">选择元素高亮</a><ul class="sidebar-sub-headers"></ul></li><li><a href="/note_blob/docs/css.html#引入字体" class="sidebar-link">引入字体</a><ul class="sidebar-sub-headers"></ul></li><li><a href="/note_blob/docs/css.html#动画" class="sidebar-link">动画</a><ul class="sidebar-sub-headers"></ul></li><li><a href="/note_blob/docs/css.html#判断屏幕尺寸" class="sidebar-link">判断屏幕尺寸</a><ul class="sidebar-sub-headers"></ul></li><li><a href="/note_blob/docs/css.html#渐变字体" class="sidebar-link">渐变字体</a><ul class="sidebar-sub-headers"></ul></li><li><a href="/note_blob/docs/css.html#_3d模式" class="sidebar-link">3D模式</a><ul class="sidebar-sub-headers"></ul></li><li><a href="/note_blob/docs/css.html#模糊差值" class="sidebar-link">模糊差值</a><ul class="sidebar-sub-headers"></ul></li></ul></section></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="css宝鉴"><a href="#css宝鉴" class="header-anchor">#</a> CSS宝鉴</h1> <h2 id="重置页面样式"><a href="#重置页面样式" class="header-anchor">#</a> 重置页面样式</h2> <div class="language-css extra-class"><pre class="language-css"><code><span class="token selector">*</span> <span class="token punctuation">{</span>
    <span class="token property">font-size</span>                 <span class="token punctuation">:</span> 12px<span class="token punctuation">;</span>
    <span class="token property">padding</span>                   <span class="token punctuation">:</span> 0<span class="token punctuation">;</span>
    <span class="token property">margin</span>                    <span class="token punctuation">:</span> 0<span class="token punctuation">;</span>
    <span class="token property">-webkit-overflow-scrolling</span><span class="token punctuation">:</span> auto<span class="token punctuation">;</span>
    <span class="token property">-webkit-tap-highlight-color</span><span class="token punctuation">:</span> transparent<span class="token punctuation">;</span> 
    <span class="token property">-webkit-appearance</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token selector">ul,
li,
ol</span> <span class="token punctuation">{</span>
    <span class="token property">list-style</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token selector">a,
a:link,
a:active,
a:visited,
a:focus</span> <span class="token punctuation">{</span>
    <span class="token property">text-decoration</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span>
    <span class="token property">outline</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div><h2 id="单行溢出省略"><a href="#单行溢出省略" class="header-anchor">#</a> 单行溢出省略</h2> <div class="language-css extra-class"><pre class="language-css"><code><span class="token property">overflow</span><span class="token punctuation">:</span> hidden<span class="token punctuation">;</span>
<span class="token property">text-overflow</span><span class="token punctuation">:</span> ellipsis<span class="token punctuation">;</span>
<span class="token property">white-space</span><span class="token punctuation">:</span> nowrap<span class="token punctuation">;</span>
</code></pre></div><h2 id="多行溢出省略"><a href="#多行溢出省略" class="header-anchor">#</a> 多行溢出省略</h2> <div class="language-css extra-class"><pre class="language-css"><code><span class="token property">display</span><span class="token punctuation">:</span> -webkit-box<span class="token punctuation">;</span>
<span class="token property">-webkit-line-clamp</span><span class="token punctuation">:</span> 3<span class="token punctuation">;</span> 
<span class="token property">-webkit-box-orient</span><span class="token punctuation">:</span> vertical<span class="token punctuation">;</span>
<span class="token property">overflow</span> <span class="token punctuation">:</span> hidden<span class="token punctuation">;</span>
<span class="token property">text-overflow</span><span class="token punctuation">:</span> ellipsis<span class="token punctuation">;</span> 
</code></pre></div><h2 id="弹性居中"><a href="#弹性居中" class="header-anchor">#</a> 弹性居中</h2> <div class="language-css extra-class"><pre class="language-css"><code><span class="token property">display</span><span class="token punctuation">:</span> flex<span class="token punctuation">;</span>
<span class="token property">justify-content</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span>
<span class="token property">align-items</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span>
</code></pre></div><h2 id="蒙层"><a href="#蒙层" class="header-anchor">#</a> 蒙层</h2> <div class="language-css extra-class"><pre class="language-css"><code><span class="token selector">.mask</span><span class="token punctuation">{</span>
    <span class="token property">position</span><span class="token punctuation">:</span> absolute<span class="token punctuation">;</span>
    <span class="token property">position</span><span class="token punctuation">:</span> fixed<span class="token punctuation">;</span>
    <span class="token property">z-index</span><span class="token punctuation">:</span> 9999<span class="token punctuation">;</span>
    <span class="token property">left</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span>
    <span class="token property">right</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span>
    <span class="token property">bottom</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span>
    <span class="token property">top</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span>
    <span class="token property">display</span><span class="token punctuation">:</span>block<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div><h2 id="计数器"><a href="#计数器" class="header-anchor">#</a> 计数器</h2> <div class="language-css extra-class"><pre class="language-css"><code><span class="token selector">ul</span> <span class="token punctuation">{</span>
  <span class="token property">counter-reset</span><span class="token punctuation">:</span> count<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">li::before</span> <span class="token punctuation">{</span>
  <span class="token property">counter-increment</span><span class="token punctuation">:</span> count<span class="token punctuation">;</span>
  <span class="token property">content</span><span class="token punctuation">:</span> <span class="token function">counter</span><span class="token punctuation">(</span>count<span class="token punctuation">)</span> <span class="token string">&quot;: &quot;</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div><h2 id="选择元素高亮"><a href="#选择元素高亮" class="header-anchor">#</a> 选择元素高亮</h2> <div class="language-css extra-class"><pre class="language-css"><code><span class="token comment">/*Webkit,Opera9.5+,Ie9+*/</span>
<span class="token selector">::selection</span> <span class="token punctuation">{</span>
	<span class="token property">color</span><span class="token punctuation">:</span> #fff<span class="token punctuation">;</span>
    <span class="token property">background</span><span class="token punctuation">:</span> #14B9C8<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token comment">/*Mozilla Firefox*/</span>
<span class="token selector">::-moz-selection</span> <span class="token punctuation">{</span>
	<span class="token property">color</span><span class="token punctuation">:</span> #fff<span class="token punctuation">;</span>
    <span class="token property">background</span><span class="token punctuation">:</span> #14B9C8<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div><h2 id="引入字体"><a href="#引入字体" class="header-anchor">#</a> 引入字体</h2> <div class="language-css extra-class"><pre class="language-css"><code><span class="token atrule"><span class="token rule">@import</span> <span class="token url"><span class="token function">url</span><span class="token punctuation">(</span><span class="token string url">'https://fonts.googleapis.com/css2?family=Orbitron:wght@500&amp;display=swap'</span><span class="token punctuation">)</span></span><span class="token punctuation">;</span></span>

<span class="token selector">.font</span><span class="token punctuation">{</span>
    <span class="token property">font-family</span><span class="token punctuation">:</span><span class="token string">'Orbitron'</span><span class="token punctuation">,</span> sans-serif<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div><h2 id="动画"><a href="#动画" class="header-anchor">#</a> 动画</h2> <div class="language-css extra-class"><pre class="language-css"><code><span class="token selector">.box1</span><span class="token punctuation">{</span>
    <span class="token property">animation</span><span class="token punctuation">:</span>flash 5s linear infinite<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">.box2</span><span class="token punctuation">{</span>
    <span class="token property">animation</span><span class="token punctuation">:</span>flash 5s .2s <span class="token punctuation">(</span>1<span class="token punctuation">,</span>-.55<span class="token punctuation">,</span>.25<span class="token punctuation">,</span>1.15<span class="token punctuation">)</span> alternate backwards<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">.box3</span><span class="token punctuation">{</span>
    <span class="token property">animation</span><span class="token punctuation">:</span> .2s <span class="token function">steps</span><span class="token punctuation">(</span>5<span class="token punctuation">,</span> start<span class="token punctuation">)</span> random infinite<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token atrule"><span class="token rule">@keyframes</span> flash</span> <span class="token punctuation">{</span>
  <span class="token selector">0%</span><span class="token punctuation">{</span>
    <span class="token property">transform</span><span class="token punctuation">:</span> <span class="token function">scale</span><span class="token punctuation">(</span>1<span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
  <span class="token selector">10%</span><span class="token punctuation">{</span>
    <span class="token property">transform</span><span class="token punctuation">:</span> <span class="token function">scale</span><span class="token punctuation">(</span>1.2<span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
  <span class="token selector">50%,
  100%</span> <span class="token punctuation">{</span>
    <span class="token property">transform</span><span class="token punctuation">:</span> <span class="token function">scale</span><span class="token punctuation">(</span>1<span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
<span class="token atrule"><span class="token rule">@keyframes</span> random</span> <span class="token punctuation">{</span>
  <span class="token selector">to</span> <span class="token punctuation">{</span>
    <span class="token property">background-position</span><span class="token punctuation">:</span> 100% 100%<span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre></div><h2 id="判断屏幕尺寸"><a href="#判断屏幕尺寸" class="header-anchor">#</a> 判断屏幕尺寸</h2> <div class="language-css extra-class"><pre class="language-css"><code><span class="token atrule"><span class="token rule">@media</span> screen <span class="token keyword">and</span> <span class="token punctuation">(</span><span class="token property">min-width</span><span class="token punctuation">:</span> 320px<span class="token punctuation">)</span> <span class="token keyword">and</span> <span class="token punctuation">(</span><span class="token property">max-width</span><span class="token punctuation">:</span> 750px<span class="token punctuation">)</span></span><span class="token punctuation">{</span>
    
<span class="token punctuation">}</span>
<span class="token atrule"><span class="token rule">@media</span> screen <span class="token keyword">and</span> <span class="token punctuation">(</span><span class="token property">min-width</span><span class="token punctuation">:</span> 1280px<span class="token punctuation">)</span></span><span class="token punctuation">{</span>
    
<span class="token punctuation">}</span>
</code></pre></div><h2 id="渐变字体"><a href="#渐变字体" class="header-anchor">#</a> 渐变字体</h2> <div class="language-css extra-class"><pre class="language-css"><code><span class="token property">background-image</span><span class="token punctuation">:</span><span class="token function">-webkit-linear-gradient</span><span class="token punctuation">(</span>bottom<span class="token punctuation">,</span>red<span class="token punctuation">,</span>#fd8403<span class="token punctuation">,</span>yellow<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token property">-webkit-background-clip</span><span class="token punctuation">:</span>text<span class="token punctuation">;</span>
<span class="token property">-webkit-text-fill-color</span><span class="token punctuation">:</span>transparent<span class="token punctuation">;</span>
</code></pre></div><h2 id="_3d模式"><a href="#_3d模式" class="header-anchor">#</a> 3D模式</h2> <div class="language-css extra-class"><pre class="language-css"><code><span class="token selector">.wrapper</span><span class="token punctuation">{</span>
    <span class="token property">width</span><span class="token punctuation">:</span> 100%<span class="token punctuation">;</span>
    <span class="token property">height</span><span class="token punctuation">:</span> 100vh<span class="token punctuation">;</span>
    <span class="token property">transform-style</span><span class="token punctuation">:</span> preserve-3d<span class="token punctuation">;</span>
    <span class="token property">transform</span><span class="token punctuation">:</span> <span class="token function">perspective</span><span class="token punctuation">(</span>500px<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">.wrapper&gt;div</span><span class="token punctuation">{</span>
    <span class="token property">width</span><span class="token punctuation">:</span> 100px<span class="token punctuation">;</span>
    <span class="token property">height</span><span class="token punctuation">:</span> 100px<span class="token punctuation">;</span>
    <span class="token property">background</span><span class="token punctuation">:</span> Red<span class="token punctuation">;</span>
    <span class="token property">transform</span><span class="token punctuation">:</span> <span class="token function">rotate3d</span><span class="token punctuation">(</span>0<span class="token punctuation">,</span>-1<span class="token punctuation">,</span>0<span class="token punctuation">,</span>60deg<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div><h2 id="模糊差值"><a href="#模糊差值" class="header-anchor">#</a> 模糊差值</h2> <div class="language-css extra-class"><pre class="language-css"><code><span class="token selector">.wrapper</span><span class="token punctuation">{</span>
    <span class="token property">filter</span><span class="token punctuation">:</span> <span class="token function">contrast</span><span class="token punctuation">(</span>30<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">.wrapper&gt;div</span><span class="token punctuation">{</span>
   <span class="token property">filter</span><span class="token punctuation">:</span> <span class="token function">blur</span><span class="token punctuation">(</span>20px<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div></div> <footer class="page-edit"><!----> <!----></footer> <!----> </main></div><div class="global-ui"></div></div>
    <script src="/note_blob/assets/js/app.2eeab7c1.js" defer></script><script src="/note_blob/assets/js/2.0b68a382.js" defer></script><script src="/note_blob/assets/js/11.5743c401.js" defer></script>
  </body>
</html>
